<template>

  <!-- 交易列表 -->
  <!--
    :data="tranList"  单向绑定表格数据

    @selection-change="handleSelectionChange"   选择改变事件
      勾选或者取消勾选复选框时触发该函数
      注意：这个函数使用的时候不需要加括号，函数触发时会自动传入参数，参数是勾选了复选框的选项数组
  -->
  <el-table
      :data="tranList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="55" />
    <el-table-column property="ownerDO.name" label="负责人" width="80" />
    <el-table-column property="clueDO.fullName" label="客户姓名" width="80" />
    <el-table-column property="appellationDO.typeValue" label="客户称呼" width="80" />
    <el-table-column property="clueDO.phone" label="客户手机" width="120" />
    <el-table-column property="clueDO.weixin" label="客户微信" width="120" />
    <el-table-column property="productDO.name" label="购买产品" />
    <el-table-column property="money" label="交易金额" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="stageDO.typeValue" label="交易阶段" />
    <el-table-column property="expectedDate" label="预计成交日期" width="180" />
    <el-table-column property="nextContactTime" label="下次联系时间" width="180" />
    <el-table-column label="操作" width="160" >
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row  获取当前行上的数据对象 -->
        <el-button type="primary" @click="detail(scope.row.id)" v-hasPermission="'tran:detail'">详情</el-button>
        <el-button type="success" @click="edit(scope.row)" v-hasPermission="'tran:edit'">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--
    分页功能
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 编辑交易信息的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
  -->
  <el-dialog
      v-model="editTranDialogVisible"
      title="编辑交易信息"
      width="60%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true">

    <el-form label-width="120px" :model="tranQuery" :rules="tranRules" ref="tranRefForm">

      <!-- 交易阶段 -->
      <el-form-item label="交易阶段" prop="stage">
        <el-select v-model="tranQuery.stage">
          <el-option v-for="stage in this.stageOptions"
                     :key="stage.id"
                     :label="stage.typeValue"
                     :value="stage.id" />
        </el-select>
      </el-form-item>

      <!-- 预计成交日期 -->
      <el-form-item label="预计成交日期" prop="expectedDate">
        <!-- type="datetime"  日期选择器的类型（样式） -->
        <!-- value-format     绑定值的格式，向后端提交的格式 -->
        <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
        <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
            v-model="tranQuery.expectedDate"
            type="datetime"
            placeholder="请选择预计成交日期"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            style="width: 100%;"/>
      </el-form-item>

      <!-- 下次联系时间 -->
      <el-form-item label="下次联系时间" prop="nextContactTime">
        <!-- type="datetime"  日期选择器的类型（样式） -->
        <!-- value-format     绑定值的格式，向后端提交的格式 -->
        <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
        <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
            v-model="tranQuery.nextContactTime"
            type="datetime"
            placeholder="请选择下次联系时间"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            style="width: 100%;"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editTranSubmit()">提交</el-button>
        <el-button @click="this.editTranDialogVisible = false">关闭</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>

</template>

<script>
import {doGet, doPut} from "../http/httpRequest.js";
  import {messageTip} from "../util/util.js";

  export default {
    name: "TranView",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 交易列表对象
        tranList: [
          {
            ownerDO: {},        // 负责人
            clueDO: {},         // 线索（包含了客户的相关信息）
            appellationDO: {},  // 称呼
            productDO: {},      // 产品
            needLoanDO: {},     // 贷款
            stageDO: {}         // 交易阶段
          }
        ],

        // 分页参数
        pageSize: 0,   // 每页记录条数
        total: 0,      // 总记录条数

        // 编辑交易信息弹窗是否可见
        editTranDialogVisible: false,

        // 交易信息对象
        tranQuery: { },

        // 交易阶段下拉选项
        stageOptions: [],

        // 编辑交易表单的验证规则
        tranRules: {
          stage: [
            { required: true, message: '请选择交易阶段', trigger: 'blur' },
          ],
          expectedDate: [
            { required: true, message: '请选择预计成交日期', trigger: 'blur' },
          ],
          nextContactTime: [
            { required: true, message: '请选择下次联系时间', trigger: 'blur' },
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动执行
    mounted() {
      // 页面渲染完成后查询第一页交易信息
      this.loadTranList(1);

      // 加载交易阶段下拉选项
      this.loadStageOptions();
    },

    methods: {
      // 加载交易列表
      loadTranList(current) {
        // 向后端发送请求
        doGet("/api/tran/list", {
          // 查询第几页的数据
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将后端返回的数据赋值给交易列表对象
            this.tranList = resp.data.data.list;
            // 分页参数
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("交易列表加载失败", "error");
          }
        })
      },

      // 加载交易阶段下拉选项
      loadStageOptions() {
        // 向后端发送请求
        doGet("/api/dicValue/stage", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 获取后端返回的交易阶段下拉选项
            this.stageOptions = resp.data.data;
          } else {
            messageTip("交易阶段下拉选项获取失败", "error");
          }
        })
      },

      // 详情按钮
      detail(id) {
        // 跳转路由
        this.$router.push("/dashboard/tran/detail/" + id);
      },

      // 编辑按钮
      edit(tran) {
        // 将要编辑的交易信息，显示到对话框内
        // 交易id
        this.tranQuery.id = tran.id;
        // 交易阶段（id）
        this.tranQuery.stage = tran.stageDO.id;
        // 预计成交日期
        this.tranQuery.expectedDate = tran.expectedDate;
        // 下次联系时间
        this.tranQuery.nextContactTime = tran.nextContactTime;

        // 弹出对话框
        this.editTranDialogVisible = true;
      },

      // 编辑交易提交按钮
      editTranSubmit() {
        // 验证表单规则
        this.$refs.tranRefForm.validate( (isValid) => {
          if (isValid) {
            // 使用FormData对象传参
            let formData = new FormData();
            // 将交易对象的属性添加到FormData对象中
            for (let field in this.tranQuery) {
              formData.append(field, this.tranQuery[field]);
            }
            // 向后端发送请求
            doPut("/api/tran/edit", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 指定禁用的日期选择
      disabledDate(time) {
        // 今天之前的日期禁止选择（今天可选）
        return time.getTime() < Date.now() - 8.64e7;
      },

      // 页码按钮（分页函数）
      toPage(current) {
        this.loadTranList(current);
      }
    }
  }
</script>

<style scoped>

  /* 交易列表 */
  .el-table {
    margin-top: 20px;  /* 上侧外边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;  /* 上侧外边距 */
  }

</style>

